<template>
	<scroll-view class="scroll-list" scroll-y refresher-default-style="none" :refresher-enabled="refresherEnabled"
		:refresher-background="background" :refresher-triggered="triggered" :refresher-threshold="refresherThreshold"
		:lower-threshold="lowerThreshold" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
		@refresherabort="onAbort" @refresherrestore="onStore" @scrolltolower="onScrolltolower"
		@scrolltoupper="onScrolltoupper" @scroll="scroll" :scroll-top="scrollTop" :scroll-with-animation="true"
		:scroll-into-view="scrollIntoView">
		<view class="no-data-wrapper" v-if="loadComplete && list.length === 0">
			<u-empty mode="order" text="暂无数据" textSize="12" textColor="#999999" icon="/static/images/common/nodata.png">
			</u-empty>
		</view>
		<view class="top-loading" v-if="triggered">
			<u-loadmore status="loading" loadingText="正在加载..." fontSize="12" color="#999999" />
		</view>
		<slot></slot>
		<view class="bottom-loading" v-if="loading||noMore">
			<u-loadmore :status="loading?`loading`:`nomore`" loadingText="努力加载中..." nomoreText="页面到底了，没有更多数据了～" height="60rpx"
				fontSize="12" color="#999999" v-if="loading||noMore" />
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "scrollList",
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			refresherEnabled: {
				type: Boolean,
				default: !1
			},
			background: {
				type: String,
				default: 'transparent'
			},
			lowerThreshold: {
				type: Number | String,
				default: 200
			},
			refresherThreshold: {
				type: Number | String,
				default: 50
			},
			scrollIntoView: {
				type: String,
				default: ''
			},
			loadComplete:{
				type: Boolean,
				default: !1
			}
		},
		data() {
			return {
				triggered: false,
				loading: false,
				noMore: false,
				timer: null,
				ms: 1000,
				showRefreshSuccessful: false,
				scrollTop: 0,
				oldScrollTop: 0
			}
		},
		methods: {
			onPulling(e) {

			},
			onStore() {

			},
			onScrolltoupper() {
				// #ifdef MP-QQ
				this.timer = new Date()
				if (this._freshing) return;
				this._freshing = true;
				this.triggered = true
				this.$emit('pullDownRefresh')
				// #endif
			},
			onRefresh() {
				this.timer = new Date()
				if (this._freshing) return;
				this._freshing = true;
				this.triggered = true
				this.$emit('pullDownRefresh')
			},
			// 滚动到底
			onScrolltolower() {
				if (this.noMore) return
				if (this._loading) return
				this._loading = true
				this.loading = true
				this.$emit('pullUpLoad')
			},
			onAbort() {
				this.pullDownDone()
				console.log("pullUpLoad");
			},

			pullDownDone() {
				const currentDate = new Date()
				const t = currentDate - this.timer
				console.log(currentDate, this.timer)
				console.log(t, 'sadasd')
				if (t < this.ms) {
					setTimeout(() => {
						this.triggered = false
						this._freshing = false
						this.noMore = false
						//this.showSuccess()
					}, this.ms - t)
				} else {
					this.triggered = false
					this._freshing = false
					this.noMore = false
					//this.showRefreshSuccessful = false;
				}
			},
			pullUpDone(flag = false) {
				this.loading = false
				this._loading = false
				if (flag) {
					this.noMore = true
				} else {
					this.noMore = false
				}
			},
			hideMore() {
				this.noMore = false
			},
			showSuccess() {
				// if(this.showRefreshSuccessful) return;
				this.showRefreshSuccessful = true;
				setTimeout(() => {
					this.showRefreshSuccessful = false;
				}, 2000);
			},
			//监听滚动
			scroll(e) {
				if (e.detail.scrollTop > this.systemInfo.windowHeight) {
					this.$parent.isTop = !0
				} else {
					this.$parent.isTop = !1
				}
				this.oldScrollTop = e.detail.scrollTop
				this.$emit("pageScroll", e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-list {
		position: relative;
		height: 100%;

		.no-data-wrapper {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -80%);
			position: absolute;
		}

		.top-loading {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			width: 100%;
			margin-top: -40rpx;
			.text{
				color: #fff;
				font-size: 24rpx;
			}
		}
		.bottom-loading {
			padding-bottom: calc(env(safe-area-inset-bottom)/2);
		}
	}
</style>
